 <template>
   <Card :shadow="shadow">
     <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate"  class="">
      <div class="card-name">
        <div class="name width1">基本信息</div>
      </div>
      <div class="content-con margin">
        <div class="form-item">
          <Row :gutter="24">
            <i-col span="8">
              <Form-item prop="nickname">
                <Row>
                  <i-col span="8" class="ban-left">
                    商户名称
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.nickname" size="large" ></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
            <i-col span="16">
              <Form-item prop="agent_uid">
                <Row>
                  <i-col span="8" class="ban-left">
                    所属代理商
                  </i-col>
                  <i-col span="16">
                    <Select v-model="formValidate.agent_uid" size="large">
                      <Option v-for="item in agentTree" :key="item.uid" :value="item.uid">{{item.nickname}}</Option>
                    </Select>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
          <Row :gutter="24">
            <i-col span="8">
              <Form-item prop="account">
                <Row>
                  <i-col span="8" class="ban-left">
                    账户名
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.account" size="large" readonly></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
            <i-col span="16">
              <Form-item prop="real_name">
                <Row>
                  <i-col span="8" class="ban-left">
                    真实姓名
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.real_name" size="large" ></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
          <Row :gutter="24">
            <i-col span="8">
              <Form-item prop="transfer_rate">
                <Row>
                  <i-col span="8" class="ban-left">
                    代付费率(%)
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.transfer_rate" size="large" ></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
            <i-col span="16">
              <Form-item prop="sing_fee">
                <Row>
                  <i-col span="8" class="ban-left">
                    代付单笔手续费(元/笔)
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.sing_fee" size="large" ></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>

          <Row :gutter="24">

            <i-col span="8">
              <Form-item prop="min_paid">
                <Row>
                  <i-col span="8" class="ban-left">
                    最小代付金额(元/笔)
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.min_paid" size="large" ></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
            <i-col span="16">
              <Form-item prop="max_paid">
                <Row>
                  <i-col span="8" class="ban-left">
                    最大代付金额(元/笔)号
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.max_paid" size="large" ></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
          <Row :gutter="24">
            <i-col span="8">
              <Form-item prop="transfer_rate">
                <Row>
                  <i-col span="8" class="ban-left">
                    线下充值费率(%)
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.recharge_rate" size="large" ></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
            <i-col span="16">
              <Form-item prop="status">
                <Row>
                  <i-col span="8" class="ban-left">
                    商户状态
                  </i-col>
                  <i-col span="16" style="padding-left: 15px;">
                    <Radio-group v-model="formValidate.status" size="large">
                      <Radio label="0">
                          <span>启用</span>
                      </Radio>
                      <Radio label="1">
                          <span>停止</span>
                      </Radio>
                    </Radio-group>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
          <Row :gutter="24">

            <i-col span="24">
              <Form-item prop="status">
                <Row>
                  <i-col span="8" class="ban-left">
                    代付模式
                  </i-col>
                  <i-col :span='[formValidate.paid_model=="1"?"8":"12"]' style="padding-left: 15px;">
                    <Radio-group v-model="formValidate.paid_model" size="large">
                      <Radio label="0">
                          <span>商户自身模式</span>
                      </Radio>
                      <Radio label="1">
                          <span>通道模式</span>
                      </Radio>
                    </Radio-group>
                  </i-col>
                  <i-col span="8" v-show='formValidate.paid_model=="1"'>
                    <Form-item prop="agent_uid" >
                      <Row>
                        <i-col span="8" class="ban-left">
                            选择通道
                          </i-col>
                        <i-col span="16">

                          <Select v-model="formValidate.channel_id" size="large">
                            <Option v-for="item in channelData" :key="item.id" :value="item.id">{{item.channel_name}}</Option>
                          </Select>
                        </i-col>
                      </Row>
                    </Form-item>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
        </div>
      </div>
      <div class="card-name">
        <div class="name width1">安全信息</div>
      </div>
      <div class="content-con">
        <div class="form-item">
          <Row :gutter="24">
            <i-col span="12">
              <Form-item prop="google">
                <Row>
                  <i-col span="8" class="ban-left">
                    谷歌验证
                  </i-col>
                  <i-col span="16">
                    <RadioGroup v-model="formValidate.google" style="margin-left: 10px;">
                            <Radio label="1"  disabled>

                                <span>已绑定</span>
                            </Radio>
                            <Radio label="0" disabled>

                                <span>未绑定</span>
                            </Radio>

                    </RadioGroup>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
          <Row :gutter="24">
            <i-col span="12">
              <Form-item prop="login_safemode">
                <Row>
                  <i-col span="8" class="ban-left">
                    登录安全类型
                  </i-col>
                  <i-col span="16">
                    <Select v-model="formValidate.login_safemode" size="large">
                      <Option value="0">仅登录密码验证</Option>
                      <Option value="1">登录密码+谷歌组合验证</Option>
                    </Select>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
            <i-col span="12">
              <Form-item prop="pay_safemode">
                <Row>
                  <i-col span="8" class="ban-left">
                    支付安全类型
                  </i-col>
                  <i-col span="16">
                    <Select v-model="formValidate.pay_safemode" size="large">
                      <Option value="0">无需验证</Option>
                      <Option value="1">仅支付密码验证</Option>
                      <Option value="2">仅谷歌验证</Option>
                      <Option value="3">支付密码+谷歌组合验证</Option>
                    </Select>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
          <Row :gutter="24">
            <i-col span="12">
              <Form-item prop="pwd">
                <Row>
                  <i-col span="8" class="ban-left">
                    登录密码
                  </i-col>
                  <i-col span="16">
                    <i-input type="password" v-model="formValidate.pwd" placeholder="若修改请输入新密码,8-16位的字母和数字组合" size="large" ></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
            <i-col span="12">
              <Form-item prop="pay_pwd">
                <Row>
                  <i-col span="8" class="ban-left">
                    支付密码
                  </i-col>
                  <i-col span="16">
                    <i-input type="password" v-model="formValidate.pay_pwd" placeholder="若修改请输入新密码,8-16位的字母和数字组合" size="large" ></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
          <Row :gutter="24">
            <i-col span="12">
              <Form-item prop="login_white_ip">
                <Row>
                  <i-col span="8" class="ban-left">
                    登录IP白名单
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.login_white_ip" size="large" type="textarea" :rows="4" placeholder="请输入登录白名单,多个IP英文逗号分隔"></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
            <i-col span="12">
              <Form-item prop="login_black_ip">
                <Row>
                  <i-col span="8" class="ban-left">
                    登录IP黑名单
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.login_black_ip" size="large" type="textarea" :rows="4" placeholder="请输入登录黑名单,多个IP英文逗号分隔"></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
          <Row :gutter="24">
            <i-col span="12">
              <Form-item prop="pay_white_ip">
                <Row>
                  <i-col span="8" class="ban-left">
                    支付IP白名单
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.pay_white_ip" size="large" type="textarea" :rows="4" placeholder="请输入支付白名单,多个IP英文逗号分隔"></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
            <i-col span="12">
              <Form-item prop="pay_black_ip">
                <Row>
                  <i-col span="8" class="ban-left">
                    支付IP黑名单
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.pay_black_ip" size="large" type="textarea" :rows="4" placeholder="请输入支付黑名单,多个IP英文逗号分隔"></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
          <Row :gutter="24">
            <i-col span="12">
              <Form-item prop="paid_white_ip">
                <Row>
                  <i-col span="8" class="ban-left">
                    代付IP白名单
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.paid_white_ip" size="large" type="textarea" :rows="4" placeholder="请输入代付白名单,多个IP英文逗号分隔"></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
            <i-col span="12">
              <Form-item prop="paid_black_ip">
                <Row>
                  <i-col span="8" class="ban-left">
                    代付IP黑名单
                  </i-col>
                  <i-col span="16">
                    <i-input v-model="formValidate.paid_black_ip" size="large" type="textarea" :rows="4" placeholder="请输入代付黑名单,多个IP英文逗号分隔"></i-input>
                  </i-col>
                </Row>
              </Form-item>
            </i-col>
          </Row>
        </div>
        <Form-item class="ban-btn">
          <i-button @click="handleSubmit()" class="save" size="large">保存</i-button>
          <i-button class="save" size="large" @click="btnClick1">返回</i-button>
        </Form-item>
      </div>
     </i-form>
   </Card>

 </template>
<script>
import {
  edit, getagent
} from '@/api/merchants'
import { channellist } from '@/api/channel'
import { mapMutations } from 'vuex'
export default {
  name: 'mer-edit',
  props: {
    shadow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      agentTree: [],
      value: '',
      status: '启用',
      disabledSingle: true,
      formValidate: {
        uid: this.$route.params.row.uid,
        nickname: this.$route.params.row.nickname,
        agent_uid: this.$route.params.row.agent_uid,
        account: this.$route.params.row.account,
        real_name: this.$route.params.row.real_name,
        recharge_rate: this.$route.params.row.recharge_rate,
        sing_fee: this.$route.params.row.sing_fee,
        transfer_rate: this.$route.params.row.transfer_rate,
        min_paid: this.$route.params.row.min_paid,
        max_paid: this.$route.params.row.max_paid,
        status: this.$route.params.row.status.toString(),
        paid_model: this.$route.params.row.paid_model.toString(),
        google: this.$route.params.row.google_secret_key!=null?'1':'0',
        login_safemode: this.$route.params.row.login_safemode,
        pay_safemode: this.$route.params.row.pay_safemode,
        pwd: this.$route.params.row.pwd,
        pay_pwd: this.$route.params.row.pay_pwd,
        login_white_ip: this.$route.params.row.login_white_ip,
        login_black_ip: this.$route.params.row.login_black_ip,
        pay_white_ip: this.$route.params.row.pay_white_ip,
        pay_black_ip: this.$route.params.row.pay_black_ip,
        paid_white_ip: this.$route.params.row.paid_white_ip,
        paid_black_ip: this.$route.params.row.paid_black_ip,
        channel_id: this.$route.params.row.channel_id
      },
      ruleValidate: {},
      channelData: []
    }
  },
  methods: {
    getList () {
      getagent().then(res => {
        this.agentTree = res.data
      }).catch(res => {
        this.$Message.error(res.msg)
      })
    },
    getChannel () {
      let data = {
        pageCurrent: 1,
        pageSize: 50
      }
      channellist(data)
        .then(res => {
          this.channelData = res.data.data
        })
        .catch(err => {
          this.$Message.error(err.msg)
        })
    },
    // 关闭标签页
    ...mapMutations([
      'closeTag'
    ]),
    close () {
      this.closeTag({
        name: 'mer-edit',
        params: {
          row: this.$route.params.row
        }
      })
    },
    // 返回按钮
    btnClick1 () {
      this.close()
    },
    // 表单验证
    handleSubmit () {
      this.$refs['formValidate'].validate(valid => {
        if (valid) {
          console.log(this.formValidate)
          edit(this.formValidate).then(res => {
            this.$Message.success(res.msg)
            setTimeout(() => this.close(), 1000)
          }).catch(res => {
            this.$Message.error(res.msg)
          })
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    }
  },
  created () {
    this.getList()
    this.getChannel()
  }
}
</script>
 <style lang="less">
     .margin{
       margin-bottom: 20px !important;
     }
 </style>
